<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="HTML通用模板 - 响应式布局，支持主题切换">
    <title>HTML通用模板</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">
                <h2>模板网站</h2>
            </div>
            <ul class="nav-menu" id="nav-menu">
                <li class="nav-item">
                    <a href="#home" class="nav-link">首页</a>
                </li>
                <li class="nav-item">
                    <a href="#about" class="nav-link">关于</a>
                </li>
                <li class="nav-item">
                    <a href="#services" class="nav-link">服务</a>
                </li>
                <li class="nav-item">
                    <a href="#contact" class="nav-link">联系</a>
                </li>
            </ul>
            <div class="nav-toggle" id="mobile-menu">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
            <button class="theme-toggle" id="theme-toggle" aria-label="切换主题">
                <i class="fas fa-moon"></i>
            </button>
        </div>
    </nav>

    <!-- 主要内容区 -->
    <main class="main-content">
        <!-- 英雄区域 -->
        <section class="hero" id="home">
            <div class="hero-container">
                <h1>欢迎使用HTML通用模板</h1>
                <p>这是一个功能完整、响应式的HTML模板，包含导航栏、卡片布局和主题切换功能。</p>
                <button class="cta-button">开始使用</button>
            </div>
        </section>

        <!-- 卡片布局区域 -->
        <section class="cards-section" id="services">
            <div class="container">
                <h2 class="section-title">特色功能</h2>
                <div class="cards-grid">
                    <div class="card">
                        <div class="card-icon">
                            <i class="fas fa-mobile-alt"></i>
                        </div>
                        <h3>响应式设计</h3>
                        <p>完美适配桌面、平板和手机等各种设备，提供一致的用户体验。</p>
                    </div>
                    <div class="card">
                        <div class="card-icon">
                            <i class="fas fa-palette"></i>
                        </div>
                        <h3>主题切换</h3>
                        <p>支持浅色和深色主题切换，满足不同用户的视觉偏好。</p>
                    </div>
                    <div class="card">
                        <div class="card-icon">
                            <i class="fas fa-code"></i>
                        </div>
                        <h3>简洁代码</h3>
                        <p>使用现代HTML5、CSS3和原生JavaScript，代码结构清晰易维护。</p>
                    </div>
                    <div class="card">
                        <div class="card-icon">
                            <i class="fas fa-rocket"></i>
                        </div>
                        <h3>快速部署</h3>
                        <p>纯静态文件，无需后端支持，可直接部署到任何Web服务器。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 关于区域 -->
        <section class="about-section" id="about">
            <div class="container">
                <h2 class="section-title">关于我们</h2>
                <div class="about-content">
                    <div class="about-text">
                        <h3>专业的模板设计</h3>
                        <p>我们专注于创建高质量、易用的HTML模板，帮助开发者快速搭建网站。这个通用模板包含了现代网站所需的所有基础功能，可以直接使用或作为项目起点。</p>
                        <ul class="feature-list">
                            <li><i class="fas fa-check"></i> 响应式布局设计</li>
                            <li><i class="fas fa-check"></i> 现代UI设计风格</li>
                            <li><i class="fas fa-check"></i> 无障碍访问支持</li>
                            <li><i class="fas fa-check"></i> SEO优化结构</li>
                        </ul>
                    </div>
                    <div class="about-image">
                        <div class="image-placeholder">
                            <i class="fas fa-image"></i>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="footer" id="contact">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>模板网站</h3>
                    <p>专业的HTML模板解决方案</p>
                    <div class="social-links">
                        <a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a>
                        <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                        <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
                    </div>
                </div>
                <div class="footer-section">
                    <h4>快速链接</h4>
                    <ul>
                        <li><a href="#home">首页</a></li>
                        <li><a href="#about">关于</a></li>
                        <li><a href="#services">服务</a></li>
                        <li><a href="#contact">联系</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>联系我们</h4>
                    <p><i class="fas fa-envelope"></i> contact@template.com</p>
                    <p><i class="fas fa-phone"></i> +86 123 4567 8900</p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 HTML通用模板. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>
